<template>
  <div id="bottom">
    <router-link to="/" :class="{'high-lighted':path=='/'}">
      <div>
          <span class="fa fa-home"></span>
          <p class="color" :class="{'high-lighted':path=='/'}">首页</p>
      </div>
    </router-link>

      <div :class="{'high-lighted':path=='/my'||path=='/loginmy'}" @touchstart="myBtnClick">
        <span class="fa fa-user-circle"></span>
        <p class="color" :class="{'high-lighted':path=='/my'||path=='/loginmy'}">我的酷秀</p>
      </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
export default {
  computed:{
    ...mapState([
      "islogin",
    ]),
    path:function(){
        return this.$route.path;
    },
  },
  methods:{
    myBtnClick:function(){
      
      if(this.islogin){
        location.hash = "/loginmy";
      }else{
        location.hash = "/my";
      }
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    /* 一个div设置了position：fixed后，它就脱离了文档流，就不再具有宽度，所以要主动设置它的width：100% */
  #bottom{
      height:44px;
      background-color:white;
      color:#bbb;
      display:flex;
      padding:7px;
      justify-content:space-between;
      position:fixed;
      left:0;
      bottom:0;
      width:100%;
      align-items:center;
      border-top:1px solid #dedede;
  }
  #bottom div{
      text-align:center;
      width:50px;
      height:44px;
  }
  #bottom div>span{
      font-size:18px;
  }
  p{
      margin:0;
      font-size:10px;
  }
  a{
      color:#bbb;
      text-decoration:none;
  }
  .color{
    color:#666;
  }
  .high-lighted{
      color:#F34B4A;
  }
</style>
